• 今天繼續來介紹一下跟時間取樣有關的sampleTime。

sampleTime

• 先來看看彈珠圖，我在下面繪製了規律的取樣示意圖，讓大家更方便了解。
• 注意看下方有一段話~ emits whichever value it has most recently emitted since the previous sampling，每次取樣都會從上一個區間內，抓取最新的值發送。
  
  圖片來源-RxJS官網-sampleTime

case1: 小試身手

stackblitz

import { interval, sampleTime, take } from 'rxjs';
// case1: basis
interval(1000).pipe(sampleTime(1000), take(5)).subscribe(console.log);

// 依序印出 0, 1, 2, 3, 4

• 上方的例子，每秒固定發送一個值，我們使用sampleTime同樣固定每秒抓取一個值，得到0, 1, 2, 3, 4。

case2: clickEvent + sampleTime

stackblitz

import { fromEvent, map, sampleTime, tap } from 'rxjs';

console.log('=== case2:click event + sampleTime ===');

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(
  map((event: MouseEvent) => {
    return { x: event.clientX, y: event.clientY };
  }),
  tap((d) => console.log(d)),
  sampleTime(3000)
);

result.subscribe((d) => console.log('--->', d));

解析

• 我們設定每3秒鐘取樣一次，在這中間的過程中，我們任意點擊，你會發現，sampleTime只傳遞最後一筆資料。

思考看看☕

• 各位可能會認為，sampleTime是取最新的值，那不就跟debounceTime一樣了嗎?
• 取值的方式一樣，但觸發上略有不同，分析如下:

1. debounceTime: 當資料來時觸發，等到設定的時間內都沒有資料時，傳遞資料。
2. sampleTime: 規律性持續觸發，觸發時會根據observable中暫存的最新值，選擇來傳遞。
3. throttleTime: 當資料來時觸發，取第一個資料傳遞，設定的時間區間內若有其他資料，均被丟棄。

同場加映 sample

圖片來源-RxJS官網-sample

• sample(notifier):簡單來說，就是透過一個observable型態的notifier來觸發取樣:

例如:我們宣告click$為一個notifier，當我點擊的時候，觸發sample，先來看個例子。

stackblitz

import { fromEvent, map, sampleTime, interval, take, tap, sample } from 'rxjs';

console.log('=== case3: click to trig sample to check current time ===');

const click$ = fromEvent(document, 'click');

// === show interval ===
interval(1000)
  .pipe(
    tap((d) => console.log(d)), //<-- 顯示幕前的秒數
    take(50),  //<-- 最多計數到50
    sample(click$) //<-- click觸發sample
  )
  .subscribe((d) => {
    console.log('click on ', d, 'sec');
  });

解析

• 時間一秒一秒的進行，每當按下click，也就是notifier，就會觸發sample進行取樣當前的秒數。

✍Recap

1. sampleTime:固定時間進行observable的資料取樣(從上一個區間內，抓取最新的值發送)。
2. sample(notifier): notifier觸發observable資料取樣。

notifier: 為一個observable

• 第24天順利搞定，最後一周囉~Just do it!